/**
 * Created by quxiangqian on 2018/6/5.
 */
export  class Popover extends React.Component {
    state={
        isShow:false,
        isPop:false,
        x:0,
        y:0,
        left:0,
        top:0,
        pos:"left"
    }

    tooltipReact=(ints)=>{
       //ints.style.left=ints.width/2;

        if(!this.target){
            return;
        }
        let toolp=$(ints);



        let inner=toolp.find("#inner");
        let arrow=toolp.find(".arrow");
        if(this.state.pos==="top"){
            toolp.find(".arrow").css("left",toolp.width()/2-arrow.outerWidth());
            toolp.find(".arrow").css("top",toolp.height())
            //toolp.css({tool})
            toolp.attr("class","popover fade bs-popover-top show");
            let tippos={
                left:this.target.offset().left-(inner.outerWidth())/2+this.target.outerWidth()/2,
                top:this.target.offset().top-(toolp.outerHeight())-arrow.outerHeight()
            }
            toolp.css(tippos);
        }

        if(this.state.pos==="left"){
            toolp.find(".arrow").css("top",inner.height()/2-arrow.outerHeight());
            toolp.find(".arrow").css("left",toolp.width());
            //toolp.css({tool})
            toolp.attr("class","popover fade bs-popover-left show");
            let tippos={
                left:this.target.offset().left-toolp.outerWidth()-arrow.outerWidth(),
                top:this.target.offset().top+(this.target.outerHeight()-inner.outerHeight())/2
            }
            toolp.css(tippos);
        }

        if(this.state.pos==="left-top"){
            toolp.find(".arrow").css("top",arrow.outerHeight()/2);
            toolp.find(".arrow").css("left",toolp.width());
            //toolp.css({tool})
            toolp.attr("class","popover fade bs-popover-left show");
            let tippos={
                left:this.target.offset().left-toolp.outerWidth()-arrow.outerWidth(),
                top:this.target.offset().top
            }
            toolp.css(tippos);
        }

        if(this.state.pos==="right"){
            toolp.find(".arrow").css("top",toolp.height()/2-arrow.outerHeight())
            toolp.find(".arrow").css("left",-arrow.outerWidth()+"px")
            //toolp.css({tool})
            toolp.attr("class","popover fade bs-popover-right show");
            let tippos={
                left:this.target.offset().left+this.target.outerWidth(),
                top:this.target.offset().top+(this.target.outerHeight()-inner.outerHeight())/2
            }
            toolp.css(tippos);
        }
        if(this.state.pos==="bottom"){
            toolp.find(".arrow").css("left",toolp.outerWidth()/2-arrow.outerWidth()*2)
            toolp.find(".arrow").css("top",-arrow.innerHeight()/2)
            //toolp.css({tool})
            toolp.attr("class","popover fade bs-popover-bottom show");
            let tippos={
                left:this.target.offset().left-(inner.outerWidth())/2+this.target.outerWidth()/2,
                top:this.target.offset().top+this.target.outerHeight()
            }
            toolp.css(tippos);
        }

    }

    hide=()=>{
        this.state.isPop=false;
        this.setState({isShow:false});
    }

    tip=(props)=>{
        let layers= document.getElementById("layers")
        //if(this.state.isShow) {
           //console.log("显示")
        //style="will-change: transform; position: absolute; transform: translate3d(27px, 3626px, 0px); top: 0px; left: 0px;"
        let part=ReactDOM.createPortal(
            <div class="popover fade bs-popover-right show" onMouseLeave={(e)=>{
                e.stopPropagation();
                e.nativeEvent.stopImmediatePropagation();
                if(this.props.autoClose){
                   this.hide();
                }

            }} onMouseOver={(e)=>{
                this.state.isPop=true;
                e.stopPropagation();
                e.nativeEvent.stopImmediatePropagation();
            }} ref={this.tooltipReact} role="tooltip">
                <div class="arrow"></div>
                <div id="inner">
                <h3 class="popover-header">{this.props.title}</h3>
                <div class="popover-body">{this.props.body}</div>
                </div>
            </div>,layers)

          return (this.state.isShow?part:"");
      //  }
    }
    componentDidMount(){
        // $(document).click((e)=>{
        //
        //     e.preventDefault();
        //     e.stopPropagation();
        //     // setTimeout((e)=>{
        //     //     this.setState({isShow:false});
        //     // },1000)
        //     this.setState({isShow:false});
        //
        // })
        // $("body").mouseleave((e)=>{
        //
        //     e.preventDefault();
        //     e.stopPropagation();
        //     this.setState({isShow:false});
        // })
    }

    render(){
        //console.log(this.tip)
        let Tips=this.tip;
        return (React.Children.map(this.props.children,(child)=>{

            if(this.props.autoClose){


            child.props.onMouseEnter=(e)=>{
                e.stopPropagation();
                e.nativeEvent.stopImmediatePropagation();
                let target=$(e.currentTarget);

                this.target=target;
                this.state.isShow=true;
                let pos={
                    isShow:true,
                    pos:this.props.pos?this.props.pos:"bottom"
                }
                // if(target.offset().top>window.outerHeight/4*3){
                //     pos.pos="bottom"
                // }
                // if(target.offset().top<window.outerHeight/4*3){
                //     pos.pos="top"
                // }
                //
                // if(target.offset().left>window.outerWidth/4*3){
                //     pos.pos="right"
                // }
                // if(target.offset().left<window.outerWidth/4*3){
                //     pos.pos="left"
                // }
                // console.log(pos.pos);

                this.setState(pos)
            }

            child.props.onMouseLeave=(e)=>{
                e.stopPropagation();
                e.nativeEvent.stopImmediatePropagation();
                setTimeout((e)=>{
                    if(!this.state.isPop){
                        this.setState({isShow:false});
                    }

                },500)
            }

            child.props.onMouseOver=(e)=>{
                e.stopPropagation();
                e.nativeEvent.stopImmediatePropagation();

            }
            }else{
                child.props.onMouseDown=(e)=>{
                    e.stopPropagation();
                    e.nativeEvent.stopImmediatePropagation();
                    let target=$(e.currentTarget);

                    this.target=target;
                    this.state.isShow=true;
                    let pos={
                        isShow:true,
                        pos:this.props.pos?this.props.pos:"bottom"
                    }

                    this.setState(pos)
                }
            }

            return [child,<Tips></Tips>];
        }));

    }
}